<template>
    <div ref="pages">
      <div class="tabview newsPageDiv">
        <Breadcrumb 
          :breadcrumbName="breadcrumbName"
          :routerLikeTo="brouterLikeTo"
        />
        
        <div >
          
          <p class="article-title">{{itemData.contentTitle}}</p>
          <div class="article-source-date">
            <span class="article-source-date-item">来源：{{itemData.contentSource}}</span>
            <a-divider type="vertical" style="margin-left:30px;margin-right:30px;" />
            <span class="article-source-date-item">发布日期：{{itemData.contentDatetime}}</span>
          </div>
          <a-divider />
           <a-spin size="large" :spinning="loading1" style="width:100%; text-align: center;" />
          <div>
            <span v-html="itemData.contentDetails" v-if="sjPageName=='focusNewsPage'"></span>
            <template v-if="sjPageName=='noticePage' || sjPageName=='commendPage' || sjPageName=='punishPage' ">
              <span v-html="itemData.contentDetails" v-if="itemData.contentDetails"></span>
              <template v-if="(itemData.contentDetails==''|| itemData.contentDetails== null ) && downloadFile.length==1 && downloadFile[0].path.split('/')[downloadFile[0].path.split('/').length-1].indexOf('pdf') != -1">
                  <a-spin size="large" :spinning="loading" style="width:100%; text-align: center;" />
                  <pdf :src="downloadFile[0].path"  v-for="i in numPages" :key="i" :page="i" @page-loaded="pageLoaded($event)" ></pdf>
              </template>
              
            </template>
            <div style="margin-top:20px;">
                 <template v-for="(item,index) in downloadFile">
                       <p :key="index" v-if="index===0"><span  style="font-size:14px;">下载附件：</span><span class="item-content-fj" @click="downloadPDf(item)">{{item.name}}</span></p>
                       <p :key="index" v-else><span class="item-content-fj" style="margin-left:69px;" @click="downloadPDf(item)">{{item.name}}</span></p>
                    
                 </template>
              </div>
          </div>

          <a-divider :dashed="dashed"/>
          <div class="last-next-div" @click="onDetail(lastArticle)" v-if="lastArticle">
            <div class="pointIconSpan" style="margin-bottom:10px;"></div>
            <div class="last-next-title" style="margin-bottom:10px;" :title="'上一篇：'+lastArticle.contentTitle">上一篇：{{lastArticle.contentTitle}}</div>
          </div>
          <div class="last-next-div"  @click="onDetail(nextArticle)" v-if="nextArticle">
            <div class="pointIconSpan" style="margin-bottom:10px;"></div>
            <div class="last-next-title" style="margin-bottom:10px;" :title="'下一篇：'+nextArticle.contentTitle">下一篇：{{nextArticle.contentTitle}}</div>
          </div>
          <a-back-top>
            <a-icon class="up-icon" type="up-circle" />
          </a-back-top>
       </div>
      </div>
    </div>
</template>

<script>
import Breadcrumb from "@/components/base/tools/Breadcrumb1";
import axios from "axios";
import pdf from 'vue-pdf'
import download from 'downloadjs'; // 引用插件
import emv from "@/views/center/emptyVue.vue";
import api from '@/api/index'
  export default {
    name: "newsDetail",
    inject: ["changeTab"],
    components: {
    //  footerPage,
     Breadcrumb,
     pdf
  },
    props: {
      page: {
        type: String,
        default: '1'
      },
    },
     data(){
      return{
        clientHeight:'',
        screenHeight:'',
        newsId:'',
        dashed:true,
        breadList: [],
        breadcrumbName:'',
        company:'',
        routerLikeTo: '',
        brouterLikeTo: '/center/newsPage',
        loading: true,
        loading1:true,
        sjPageName:'',
        numPages:0,
        pageNum: 1,
        pageTotalNum: 1, // 总页数
        loadedRatio: 0, //当前页面的加载进度，范围是0-1 ，等于1的时候代表当前页已经完全加载完成了
        itemData:{},
        pdfSrc: '', 
        contentDetails:'',
        downloadFile:[],
  
        lastArticle:null,
        nextArticle:null,
        articlePageFilter: {
          appid:1,
          // pageNo:1,
          // pageSize:1 ,
        },
      }
      
    },
    watch: {
    
    },
  
    created(){
      document.documentElement.scrollTop = 0;
      this.routerLikeTo = this.$route.query.routerLikeTo;
      this.brouterLikeTo = this.routerLikeTo
      this.breadcrumbName = this.$route.query.breadcrumbName;
      this.newsId = this.$route.query.id;
       this.loading1 = true;
      this.get_news_data();
      
      
    },
    mounted(){
      this.setFootStyle();
    },
 
    methods: {
      initData(){
        this.loading = true;
        if(this.itemData==='[object Object]'){
          this.itemData = this.$store.state.newsItem.news;
        }else{
          if(this.itemData.contentDetails){
            if(this.itemData.contentDetails.indexOf("src=\"/")>=0 ){
              let reg=new RegExp("src=\"/","g")
              this.itemData.contentDetails=this.itemData.contentDetails.replace(reg,"src=\""+this.$globalConfig.adressPath+"/");
            }

            if(this.itemData.contentDetails.indexOf("href=\"")>=0 ){
              let reg=new RegExp("href=\"","g")
              this.itemData.contentDetails=this.itemData.contentDetails.replace(reg," target=\"_blank\" href=\"/api");
            }
          }
          
          this.$store.commit('newsItem/setNews', this.itemData); 
        }
       
        if(this.breadcrumbName=='不良行为'){
          this.sjPageName = this.routerLikeTo.split('/')[2];
          this.brouterLikeTo = this.routerLikeTo
        }else{
          this.sjPageName = this.routerLikeTo.split('/')[3];
          this.brouterLikeTo = this.routerLikeTo
        }
        this.get_news_pre_list();
        this.get_news_next_list();
        this.get_news_file_list();
        this.setTab();
      },
      limitNumber(value) {  
          
          if (typeof value === 'string') {
            return !isNaN(Number(value)) ? value.replace(/\./g, '') : 1
          } else if (typeof value === 'number') {
            return !isNaN(value) ? String(value).replace(/\./g, '') : 1
          } else {
            return 1
          }
      },
      // 上一页
      prePage() {
        let page = this.pageNum
        page = page > 1 ? page - 1 : this.pageTotalNum
        this.pageNum = page
      },

      // 下一页
      nextPage() {
        let page = this.pageNum
        page = page < this.pageTotalNum ? page + 1 : 1
        this.pageNum = page
      },
      pageLoaded(e){
         this.pageNum = e
         this.loading = false;
         emv.$emit("setfootmargintop",10);
      },
      setTab(){
        let ejPageName = this.routerLikeTo.split('/')[2];
        let currentPage = '';
        let pageTitle = '';
        if(ejPageName == 'newsPage'){
          currentPage = '1';
          pageTitle = '新闻通知'
        }
        // else if(ejPageName == 'badBehaviorPage'){
        //   currentPage = '2';
        //   pageTitle = '不良行为'
        // }
        else if(ejPageName == 'commendPunishPage'){
          currentPage = '2';
          pageTitle = '表彰与惩罚'
        }
        this.changeTab(currentPage, ejPageName, '<span class="tab_name">'+pageTitle+'</span>');
      },
      
      onDetail(item){
         this.newsId = item.id;
         this.get_news_data();
         document.documentElement.scrollTop = 0;
      },
      get_news_pre_list() {
        this.articlePageFilter.contentCategoryId = this.itemData.contentCategoryId
        this.articlePageFilter.contentDatetime = this.itemData.contentDatetime
        this.articlePageFilter.contentDisplay = 0
        api.get_news_pre_list(this.articlePageFilter).then(res => {
   
          if(res.rows.length>0){
             this.lastArticle = res.rows[0];
          }
         
        })
        .catch(err => {
        });
      },
      get_news_next_list() {
        this.articlePageFilter.contentCategoryId = this.itemData.contentCategoryId
        this.articlePageFilter.contentDatetime = this.itemData.contentDatetime
        this.articlePageFilter.contentDisplay = 0
        api.get_news_next_list(this.articlePageFilter).then(res => {
        
          if(res.rows.length>0){
             this.nextArticle = res.rows[0];
          }
         
        })
        .catch(err => {
        });
      },
      async get_news_file_list() {
        this.downloadFile = [];
        this.numPages = 0;
        //275
        await api.get_news_file_list(this.newsId).then(res => {
          // debugger
          let fileData;
          if(res!=null){
            if(res.fileuploadOne){
              fileData = JSON.parse(res.fileuploadOne);
              this.downloadFile = fileData;
              if(fileData.length>0){
                for(let i = 0; i < fileData.length; i++){
                  this.downloadFile[i].path = "/api"+fileData[i].path;
                  this.downloadFile[i].url = "/api"+fileData[i].url;
                }
                
              }
            }
           
          }
         
          
         
        })
        .catch(err => {
           console.log(err);
        });

        if(this.sjPageName !='focusNewsPage' && this.downloadFile.length==1 && this.downloadFile[0].path.split('/')[this.downloadFile[0].path.split('/').length-1].indexOf('pdf') != -1){
          this.pdfSrc = this.downloadFile[0].path;
          this.pdfSrc = pdf.createLoadingTask(this.pdfSrc)
          this.pdfSrc.promise.then(pdf => {
            this.numPages = pdf.numPages
          }).catch((err) => {
              this.$message.error('pdf加载失败')
          });
          }
         this.setFootStyle();
      },
      get_news_data(){
         api.get_news_by_id(this.newsId).then(res => {
             this.itemData = res;
              this.loading1 = false;
             this.initData();
          })
          .catch(err => {
            this.loading1 = false;
          });
      },
      downloadPDf(item){
          download(item.path); 
      },
      getScreenHeight(){
        // 获取浏览器可视区域高度
          this.screenHeight = document.body.clientHeight ;  
          window.onresize = function temp() {
          this.screenHeight = document.body.clientHeight;
        };
      },
      setFootStyle(){
        this.$nextTick(()=>{ // 页面渲染完成后的回调
                  this.getScreenHeight();
                  this.clientHeight = this.$refs.pages.offsetHeight+364;
                   if(this.screenHeight>this.clientHeight){
                    if(this.screenHeight-this.clientHeight>40){
                      emv.$emit("setfootmargintop",this.screenHeight-this.clientHeight);
                    }else{
                       emv.$emit("setfootmargintop",40);
                    }
                  }else{
                    emv.$emit("setfootmargintop",40);
                  }   
                });
      }
    },

  };
</script>
<style lang="less">
.newsPageDiv{
  .ant-input-number-handler-wrap {
    position: absolute;
    top: 0;
    right: 0;
    width: 0px;
    height: 100%;
    background: #fff;
    border-left: 1px solid #d9d9d9;
    border-radius: 0 4px 4px 0;
    opacity: 0;
    -webkit-transition: opacity 0.24s linear 0.1s;
    transition: opacity 0.24s linear 0.1s;
    display: none;
  }
  .ant-input-number {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    font-variant: tabular-nums;
    list-style: none;
    -webkit-font-feature-settings: 'tnum';
    font-feature-settings: 'tnum';
    position: relative;
    width: 100%;
    height: 32px;
    padding: 4px 11px;
    color: rgba(0, 0, 0, 0.65);
    font-size: 14px;
    line-height: 1.5;
    background-color: #fff;
    background-image: none;
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
    display: inline-block;
    width: 3em;
    margin: 0;
    padding: 0;
    border: 1px solid #d9d9d9;
    border-radius: 0px;
}
  .ant-input-number-input {
    width: 100%;
    height: 30px;
    padding: 0px 0px;
    text-align: center;
    background-color: transparent;
    border: 0;
    border-radius: 0px;
    outline: 0;
    -webkit-transition: all 0.3s linear;
    transition: all 0.3s linear;
    -moz-appearance: textfield !important;
}
}
.breadcrumb{
  margin-top: 20px;
}
.article-title{
  font-size: 26px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #333333;
  text-align: center;
  margin-top: 20px;
}
.article-source-date{
  text-align: center;
  margin-top: -8px;
  .article-source-date-item{
    font-size: 14px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #666666;
  }
  
}
.ant-divider-horizontal {
    display: block;
    clear: both;
    width: 100%;
    min-width: 100%;
    height: 1px;
    margin: 15px 0;
  } 
img{
  // width:100%;
  max-width:100%;
}
.last-next-div{
  display:flex;
  margin-top: 30px;
  .pointIconSpan{
    background:#337BD7;
    width:16px;
    height:16px;
  }
  .last-next-title{ 
    width: 100%;
    height: 16px;
    font-size: 16px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #333333;
    line-height: 16px;
    margin-left: 15px;
    text-overflow: ellipsis;  /*超出内容用省略号*/
    overflow: hidden; /*内容超出后隐藏*/
    white-space: nowrap; /*文本不进行换行*/
    // margin-top: -3px;
  }
  .last-next-title:hover{
    color: #337BD7;
    cursor: pointer;
    font-weight: 600;
  }
 
}
.item-content-fj{
    font-size: 14px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    text-decoration: underline;
    color: #FF0000;
    cursor: pointer;
    margin-bottom: 5px;
  }
.item-content-fj:hover{
  color: #f50000;
  font-weight: 600;
}
</style>